<!-- 消息通知的组件 -->
<template>
  <div class="notification">
    
    <icon-message-unread theme="outline" size="24" fill="#333" @click.stop="show=!show" />

 
    <el-tabs v-model="activeName" class="lists" v-show="show" @click.stop>
      <el-tab-pane label="系统消息" name="site" >
    
        <a href="">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          nostrum modi animi voluptates repellendus voluptatum ex doloribus quo
          consectetur perferendis, alias eum nobis fuga reiciendis nihil vero
          voluptas veritatis pariatur.
        </a>
         <a href="">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          nostrum modi animi voluptates repellendus voluptatum ex doloribus quo
          consectetur perferendis, alias eum nobis fuga reiciendis nihil vero
          voluptas veritatis pariatur.
        </a>
         <a href="">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          nostrum modi animi voluptates repellendus voluptatum ex doloribus quo
          consectetur perferendis, alias eum nobis fuga reiciendis nihil vero
          voluptas veritatis pariatur.
        </a>
         <a href="">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          nostrum modi animi voluptates repellendus voluptatum ex doloribus quo
          consectetur perferendis, alias eum nobis fuga reiciendis nihil vero
          voluptas veritatis pariatur.
        </a>

      </el-tab-pane>
      <el-tab-pane label="站内通知" name="message">
           <a href="">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          nostrum modi animi voluptates repellendus voluptatum ex doloribus quo
          consectetur perferendis, alias eum nobis fuga reiciendis nihil vero
          voluptas veritatis pariatur.
        </a>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">

import { ref ,nextTick} from "vue";
const activeName = ref("site");
const show=ref(false)

nextTick(()=>{
    document.documentElement.addEventListener("click",()=>{
        show.value=false  //还要阻止点击事件的冒泡
    })
})
</script>

<style lang="scss" scoped>
.notification {
  @apply relative ;
  .lists {
    @apply absolute bg-white p-3 border rounded-md 
      shadow-md right-[-60px] z-20 w-[300px] text-sm;
      a{
        @apply  truncate  block  hover:text-fuchsia-700
      }
    
  }
}
</style>
